<template>
	<view>
		<nav-bar title="商品详情页"></nav-bar>
		<van-swipe :autoplay="3000" lazy-render>
			<van-swipe-item v-for="imgUrl in goods.goods_banner_imgs" :key="imgUrl">
				<image class="swipe-image" :src="imgUrl" />
			</van-swipe-item>
		</van-swipe>
		<view class="goods-content">
			<view class="goods-price">
				￥{{goods.price}}
			</view>
		</view>
		<view class="goods-title">
			{{goods.name}}
		</view>
		<view class="goods-descript">
			{{goods.goods_desc}}
		</view>
		<view class="detail">
			<u-parse :content="goods.detail"></u-parse>
		</view>
		<van-action-bar>
			<van-action-bar-icon icon="chat-o" text="客服" dot />
			<van-action-bar-icon icon="cart-o" text="购物车" :badge="cartGoodsNumber" @click="goCart" />
			<van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
			<van-action-bar-button type="warning" text="加入购物车" @click="addGoodsToCart" />
			<van-action-bar-button type="danger" text="立即购买" @click="goPay" />
		</van-action-bar>
	</view>
</template>

<script>
	const GoodsModel = uniCloud.importObject('goods-model')
	import uParse from '@/components/u-parse/u-parse.vue'
	import Storage from '@/untils/storage.js'
	export default {
		data() {
			return {
				goods: {}
			}
		},
		components: {
			uParse
		},
		computed: {
			cartGoodsNumber() {
				return this.$store.getters.cartGoodsNumber;
			}
		},
		onLoad(options) {
			// console.log(options);
			let id = options.id;
			this.getGoods(id)
		},
		methods: {
			getGoods(id) {
				GoodsModel.detail(id).then(res => {
					this.goods = res.data
					this.goods.detail = this.htmlUnEscape(this.goods.detail);
				})
			},
			goCart() {
				uni.navigateTo({
					url: "/pages/cart/index"
				})
			},
			goPay(){
				let goods = this.goods;
				let content = `你确定要购买${this.goods.name}价格为:${this.goods.price}元`
				uni.showModal({
					title:'购买商品',
					content:content,
					success(res) {
						if(res.confirm){
							// 先把商品添加到需要结算的缓存中
							Storage.set('payGoods',[
								{
									_id:goods._id,
									name:goods.name,
									goods_name:goods.name,
									goods_desc:goods.goods_desc,
									goods_thumb:goods.goods_thumb,
									num:1,
									attr_id:"",
									price:goods.price
								}
							]);
							uni.navigateTo({
								url:'/pages/pay/index'
							})
						}
					}
				})
			},
			addGoodsToCart() {
				this.$store.commit("addGoods", {
					goods_id: this.goods._id,
					num: 1,
					attr_id: "0",
					price: this.goods.price * 100,
					thumb: this.goods.goods_thumb,
					goods_name: this.goods.name,
					goods_descript: this.goods.goods_desc
				})
				console.log(this.$store.state.cart.cart)
			},
			htmlUnEscape(str) { //反转义
				var unescapes = {
						'&amp;': '&',
						'&lt;': '<',
						'&gt;': '>',
						'&quot;': '"',
						'&#39;': "'"
					},
					reEscapedHtml = new RegExp(/&(?:amp|lt|gt|quot|#39);/g);
				return (str && reEscapedHtml.test(str)) ? str.replace(reEscapedHtml, function(entity) {
					return unescapes[entity];
				}) : (str || '')
			}
		},
	}
</script>

<style>
	@import url("@/components/u-parse/u-parse.css");

	.swipe-image {
		width: 100%;
		height: 750upx;
	}

	.goods-content {
		width: 100%;
		height: 100upx;
		background-image: url(https://img12.360buyimg.com/img/s750x100_jfs/t1/119650/20/7754/47352/5ed632eaE8b4d8095/1e2456ef7139c95f.png);
		background-repeat: no-repeat;
		background-size: 750upx 100upx;
	}

	.goods-price {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		color: #fff;
		font-size: 40upx;
	}

	.detail image {
		width: 1;
	}
</style>
